<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绘制中国地图</title>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinaMapPathRaw.js"></script>
</head>
<body>
<div id="map" style="width:560px;height:470px;"></div>
<script type="text/javascript">
function showMap(R){
    var chinaMapPath = {};
    var textAttribute = {"fill": "#000000", "font-size": "12px", "cursor": "pointer"};
    var mapAttribute = {"fill": "#97d6f5", "stroke": "#ffffff", "stroke-width": 1, "stroke-linejoin": "round"};
    var offset = {
        "jiangsu": [5, -10],
        "hebei": [-10, 20],
        "tianjin": [10, 10],
        "shanghai": [10, 0],
        "guangdong": [0, -10],
        "aomen": [0, 10],
        "hk": [20, 5],
        "gansu": [-40, -30],
        "shanxi": [5, 10],
        "neimeng": [-15, 65]

    };
    function objectClone(object){
        var result = {};
        var array = Object.getOwnPropertyNames(object);
        for(var i = 0; i < array.length; i++){
            result[array[i]] = object[array[i]];
        }
        return result;
    }
    function setMap(alias, name, color, path){
        var xx = path.getBBox().x + (path.getBBox().width / 2);
        var yy = path.getBBox().y + (path.getBBox().height / 2);
        if(offset[alias]){
            xx += offset[alias][0];
            yy += offset[alias][1];
        }
        chinaMapPath[alias]['text'] = R.text(xx, yy, name).attr(textAttribute);
        path[0].onmouseover = function(){
            path.animate({fill: path.color}, 200);
            chinaMapPath[alias]['text'].toFront();
            R.safari();
        };
        path[0].onmouseout = function(){
            path.animate({fill: color}, 200);
            chinaMapPath[alias]['text'].toFront();
            R.safari();
        };
    }
    for(var alias in chinaMapPathRaw){
        var temp = chinaMapPathRaw[alias];
        var mapAttributeClone = objectClone(mapAttribute);
        mapAttributeClone.fill = temp.color;
        chinaMapPath[alias] = {name: temp.name, path: R.path(temp.path).attr(mapAttributeClone)};
        chinaMapPath[alias]['path'].color = "#ff0000";/*鼠标移动上去的颜色*/
        setMap(alias, temp.name, temp.color,chinaMapPath[alias]['path']);
    }
}

window.onload = function () {
    chinaMapPathRaw.guizhou.color = "#00ff00";
    showMap(Raphael("map", 560, 470));
}
</script>
</body>
</html>
